<template>
  <div class="login_container">
    <!-- 登录框 -->
    <div class="login_box">
      <!-- 头像 -->
      <div class="avator_box">
        <img src="../assets/logo.png" alt="" />
      </div>
      <!-- 表单部分 -->
      <div class="form_box" v-on:click="test($event)">
        <el-form ref="form" :model="myform" :rules="rules" label-width="80px">
          <el-form-item label="用户名:" prop="username">
            <el-input prefix-icon="iconfont icon-user" placeholder="输入用户名" v-model="myform.username"></el-input>
          </el-form-item>

          <el-form-item label="密码:" prop="password">
            <el-input prefix-icon="iconfont icon-3702mima" placeholder="输入密码" type="password" v-model="myform.password" auto-complete="off"></el-input>
          </el-form-item>

          <el-form-item label="记住我">
            <el-switch v-model="myform.remember" @change="switchStatus($event, 1)"></el-switch>
          </el-form-item>

          <el-form-item class="btns">
            <el-button type="primary" round @click="submitForm">登录</el-button>
            <el-button type="info" round @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 网站备案部分 -->
    <div class="record">
      <div>
        <p>网站负责人：谢辉</p>
        <p>联系方式：18565017579</p>
        <p>邮箱：xieh_mail@163.com</p>
      </div>
      <div>
        <img src="../assets/baicon.png" alt="" />
        <p>网站备案/许可证编号为：豫ICP备2020036456号</p>
      </div>
    </div>
  </div>
</template>


<script>
import rmu from '../util/remember_me_util'
//rmu.setCookie("account", "xieh&1314000...");
// console.log(rmu.getCookie("account"));
export default {
  data() {
    // 验证密码
    var validatePass = (rule, value, callback) => {
      //校验密码：只能输入6-20个字母、数字、下划线
      var patrn = /^(\w){6,20}$/
      if (patrn.exec(value)) {
        callback()
      } else {
        callback(new Error('密码需要是6-20个字母、数字、下划线'))
      }
    }

    // 验证用户名
    var validateName = (rule, value, callback) => {
      //校验用户姓名：只能输入3-10个以字母开头的字串
      var patrn = /^[a-zA-Z]{3,10}$/
      if (patrn.exec(value)) {
        callback()
      } else {
        callback(new Error('用户名必须是3-10个以字母开头的字串'))
      }
    }

    return {
      myform: {
        username: '',
        password: '',
        remember: false,
      },
      rules: {
        // 注意：prop和v-modle绑定的值一定要一致，不然表单校验不生效！
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          { min: 3, message: '长度最少3个字符', trigger: 'blur' },
          { validator: validateName, trigger: 'blur' },
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' },
        ],
      },
    }
  },
  mounted() {
    console.log('执行了....')
    let account = rmu.getCookie('account')
    // 表示没有选择记住密码，或者数据清除，记住我按钮关闭
    if (account === '') {
      this.myform.remember = false

      // 表示cookie有用户的信息，打开记住我按钮
    } else {
      let index = account.indexOf('&')
      if (index != -1) {
        this.myform.remember = true
        this.myform.username = account.substring(0, index)
        this.myform.password = account.substring(index + 1)
      }
    }
  },
  methods: {
    switchStatus($event, num) {
      this.myform.remember = $event
      if (!$event) {
        console.log('用户取消了记住我功能...')
        rmu.delCookie('account')
      }
      console.log($event) // 默认参数，当前状态改变值
      console.log(num) // 自定义参数
    },
    submitForm() {
      // 表单校验
      this.$refs.form.validate(async (valid) => {
        console.log('表单校验：' + valid)
        // 表示用户填写的数据合格
        if (valid) {
          // TODO 登录逻辑...
          console.log('登录按钮....')
          /**
               ES6 的对象解构
               如果变量名与属性名不一致，必须写成下面这样。
               let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
               baz // "aaa"
               foo // error: foo is not defined
             */
          const { data: res } = await this.$http.post('login', this.myform)
          console.log(res)
          if (res.meta.status != 200) return this.$message.error('登录失败')

          this.$message.success('登录成功')

          let cookieUser = rmu.getCookie('account')
          // 表示用户没有cookie信息，并且开启记住我的功能
          if (cookieUser == '' && this.myform.remember) {
            console.log('用户开启了记住我功能，并且设置了密码')
            rmu.setCookie('account', this.myform.username + '&' + this.myform.password)
          }
          // 1.登录成功以后的token，保存到客户端的sessionlocalstorage中
          // 1.1项目中除了登录以外的其他api接口，需要登录以后才能访问
          // 1.2 token只在当前网站打开的才有效，所以放在sessionlocalstorage
          window.sessionStorage.setItem('token', res.data.token)

          // 2.通过编程式导航跳转到后台主页。路由地址是/home
          this.$router.push('/home')
        }
      })
    },
    test(e) {
      //console.log("点击了表单..", e);
    },
    // 表单重置
    resetForm() {
      this.$refs.form.resetFields()
      rmu.delCookie('account')
      this.myform.remember = false
      console.log('重置了表单....')
    },
  },
}
</script>



<style lang="less" scoped>
.login_container {
  background-color: #2b4b6b;
  height: 100%;
  .login_box {
    width: 450px;
    height: 350px;
    background-color: #ffffff;
    border-radius: 3px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .avator_box {
      width: 130px;
      height: 130px;
      border: 1px solid #eee;
      background-color: #ffffff;
      margin: 0 auto;
      transform: translateY(-50%);
      border-radius: 50%;
      padding: 10px;
      box-shadow: 0 0 10px #ddd;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #eee;
      }
    }
    .form_box {
      width: 100%;
      height: 71%;
      background-color: transparent;
      margin-top: -7%;
    }
  }
}
.btns {
  display: flex;
  justify-content: flex-end;
}
.el-input {
  width: 90%;
}
.record {
  width: 540px;
  height: 80px;
  position: absolute;
  top: 85%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  color: #ececec;
}
.record > div {
  width: 100%;
  height: 50%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.record > div:nth-of-type(2) {
  width: 72%;
  justify-content: flex-start;
  p {
    margin-left: 5px;
  }
}
</style>